<template>
  <div class="zl-text" ref="text">
    <div ref="chartText" class="zl-text-chart-text" id="chartText">
      <!-- <p v-for="(item, index) in textValue" :key="index">{{item}}</p> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    graphOptions: {
      required: true,
      type: Object
    },
    config: {
      type:Object,
      default:function () {
          return {}
      }
    }
  },
  data() {
    return {
      textValue: []
    }
  },
  mounted () {
    // this.init()
    this.initChange()
  },
  methods: {
    // 改进型
    initChange(){
      if (this.graphOptions) {
        this.$refs.text.style.background = 'none'
        if (this.graphOptions.backgroundColorURL) {
           // 设置背景
          this.backgroundColorURL = this.graphOptions.backgroundColorURL
          if(this.backgroundColorURL){
            this.$refs.text.style.background = 'url(' + this.backgroundColorURL + ') no-repeat'
            this.$refs.text.style.backgroundSize = '100% 100%'
          }
        }
        if (this.graphOptions.backgroundColor) {
            this.$refs.text.style.backgroundColor = this.graphOptions.backgroundColor
        }
      }
      if (!this.graphOptions || (typeof this.graphOptions === 'object' && Object.keys(this.graphOptions).length === 0) || !this.graphOptions.others) {
        return
      }
      if(this.graphOptions.others.value != null && this.graphOptions.others.value !== ''){
        $('#chartText').html('')
        let dataHtml = this.graphOptions.others.value
        $('#chartText').html(dataHtml)
      }else{
        $('#chartText').html('')
      }
    },
    init() {
      if (this.graphOptions) {
        this.$refs.text.style.background = 'none'
        if (this.graphOptions.backgroundColorURL) {
           // 设置背景
          this.backgroundColorURL = this.graphOptions.backgroundColorURL
          if(this.backgroundColorURL){
            this.$refs.text.style.background = 'url(' + this.backgroundColorURL + ') no-repeat'
            this.$refs.text.style.backgroundSize = '100% 100%'
          }
        }
        if (this.graphOptions.backgroundColor) {
            this.$refs.text.style.backgroundColor = this.graphOptions.backgroundColor
        }
      }
      if (!this.graphOptions || (typeof this.graphOptions === 'object' && Object.keys(this.graphOptions).length === 0) || !this.graphOptions.others) {
        return
      }
      // 设置内容
      if(this.graphOptions.others.uedata != null && this.graphOptions.others.uedata.length > 0){
        this.textValue = this.graphOptions.others.uedata
      }
      // 设置颜色
      if(this.graphOptions.others.fontColor != null && this.graphOptions.others.fontColor !== ''){
        let color = this.graphOptions.others.fontColor
        this.$refs.chartText.style.color = color
      }else{
        this.$refs.chartText.style.color = ''
      }
      // 设置大小
      if(this.graphOptions.others.fontSize != null && this.graphOptions.others.fontSize !== ''){
        let fontSize = this.graphOptions.others.fontSize
        this.$refs.chartText.style.fontSize = fontSize + 'px'
      }else{
        this.$refs.chartText.style.fontSize = ''
      }
      // 设置位置
      if(this.graphOptions.others.textAlign != null && this.graphOptions.others.textAlign !== ''){
        let textAlign = this.graphOptions.others.textAlign
        this.$refs.chartText.style.textAlign = textAlign
        if(textAlign === 'left'){
          this.$refs.chartText.style.right = ''
          this.$refs.chartText.style.left = '0'
          this.$refs.chartText.style.transform = ''
        }else if(textAlign === 'center'){
          this.$refs.chartText.style.right = ''
          this.$refs.chartText.style.left = '50%'
          this.$refs.chartText.style.transform = 'translate(-50%, -50%)'
        }else if(textAlign === 'right'){
          this.$refs.chartText.style.left = ''
          this.$refs.chartText.style.right = '0'
          this.$refs.chartText.style.transform = ''
        }else{
          this.$refs.chartText.style.left = '50%'
          this.$refs.chartText.style.transform = ''
        }
      }else{
        this.$refs.chartText.style.textAlign = ''
      }
      // 设置加粗 fontB == 1 加粗  == 0 不加粗
      if(this.graphOptions.others.fontB != null && this.graphOptions.others.fontB !== 0){
        this.$refs.chartText.style.fontWeight = 'bold'
      }else{
        this.$refs.chartText.style.fontWeight = ''
      }
      // 设置斜体 fontB == 1 斜体  == 0 正常
      if(this.graphOptions.others.fontI != null && this.graphOptions.others.fontI !== 0){
        this.$refs.chartText.style.fontStyle = 'italic'
      }else{
        this.$refs.chartText.style.fontStyle = ''
      }
      // 设置下划线 fontB == 1 有下划线  == 0 无下划线
      if(this.graphOptions.others.fontU != null && this.graphOptions.others.fontU !== 0){
        this.$refs.chartText.style.textDecoration = 'underline'
      }else{
        this.$refs.chartText.style.textDecoration = ''
      }
    },
    getDataURL() {
    	return null
    }
  },
  watch: {
    graphOptions: {
      handler(val) {
        this.initChange()
      },
      deep: true
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
.zl-text {
  position: relative;
  height: 100%;
  width: 100%;
  .zl-text-chart-text{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
